<template>
  <div :class="styles['qr-code']" ref="qrCodeRef" style="height: 80px;width: 80px;">
    <img :src="codeUrl" alt="" style="height: 100%;width: 100%;vertical-align: middle">
  </div>
</template>

<script setup name="QrCode">
import {ref} from 'vue'
import QRCode from 'qrcode'

const props = defineProps({
  url: {
    type: String,
    default: ''
  }
})

const codeUrl = ref('')

QRCode.toDataURL(props.url)
  .then(url => {
    codeUrl.value = url
  })
  .catch(err => {
    codeUrl.value = err
  })
</script>

<style lang="less" src="./index.less" module="styles">
</style>
